<template>
  <div class="department">
    <!--<el-card class="box-card">-->
      <!--<div slot="header" class="clearfix">-->
        <!--<span>部门管理</span>-->
      <!--</div>-->
      <div class="custom-tree-container">
          <el-tree :data="data4" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false" :props="props"  >
          <span class="custom-tree-node" slot-scope="{ node, data }" >
            <span>{{node.label}}</span>
            <span>
              <KtButton :label="('添加'+node.level+'级部门')" perms="Organization:Department:add" type="primary" size="mini" @click="() => handleAdd(node,data)" v-if="node.level <3" >
              </KtButton>
              <KtButton :label="('添加'+node.level+'级部门')" perms="Organization:Department:add" type="primary" size="mini" @click="() => handleAdd3(node,data)" v-if="node.level ==3" >
              </KtButton>
               <KtButton :label="$t('action.edit')" type="primary" perms="Organization:Department:edit" size="mini" @click="() => handleEdint(node,data)" v-if="node.level != 1">
              </KtButton>
              <KtButton :label="$t('action.delete')" perms="Organization:Department:delete" type="danger" size="mini"  v-if="node.level != 1" @click="handleDelete(node,data)">
              </KtButton>
            </span>
          </span>
          </el-tree>
      </div>
    <!--</el-card>-->
    <!--添加部门弹窗-->
    <el-dialog :title="'添加部门'" width="40%" :visible.sync="dialogVisible" :close-on-click-modal="false">
      <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="submitForm()"
               label-width="100px" :size="size" style="text-align:left;">
        <el-form-item :label="dataForm.deptLevel+ '级部门名称'" prop="deptName">
          <el-input v-model="dataForm.deptName" :placeholder=" dataForm.deptLevel+'级部门名称'"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" commonButton="" @click="dialogVisible = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size"  type="primary" @click="submitForm()">{{$t('action.comfirm')}}</el-button>
      </span>
    </el-dialog>
    <!--添加三级部门弹窗-->
    <el-dialog :title="'添加部门'" width="40%" :visible.sync="dialogVisible3" >
      <el-form :model="dataForm" :rules="deptRule" ref="dataForm"
               label-width="100px" :size="size" style="text-align:left;">
        <el-form-item :label="dataForm.deptLevel+ '级部门名称'" prop="deptName">
          <el-input v-model="dataForm.deptName" :placeholder=" dataForm.deptLevel+'级部门名称'"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="deptType">
          <el-select v-model="dataForm.deptType" filterable clearable style="width: 93%" placeholder="请选择类型">
            <el-option
              v-for="item in popupTreeData"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" commonButton="" @click="dialogVisible3 = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size"  type="primary" @click="submitForm()">{{$t('action.comfirm')}}</el-button>
      </span>
    </el-dialog>
    <!--编辑弹窗-->
    <el-dialog :title="'编辑'" width="40%" :visible.sync="deptType" >
      <el-form :model="dataForm" :rules="deptRule" ref="dataFormEdit"
               label-width="100px" :size="size" style="text-align:left;">
        <el-form-item :label="dataForm.deptLevel+ '级部门名称'" prop="deptName">
          <el-input v-model="dataForm.deptName" :placeholder=" dataForm.deptLevel+'级部门名称'"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="deptType" v-if="dataForm.deptLevel == 3">
          <el-select v-model="dataForm.deptType" filterable clearable style="width: 93%" placeholder="请选择类型">
            <el-option
              v-for="item in popupTreeData"
              :key="item.key"
              :label="item.value"
              :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button :size="size" commonButton="" @click="deptType = false">{{$t('action.cancel')}}</el-button>
        <el-button :size="size"  type="primary" @click="submitEdint()">{{$t('action.comfirm')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  // import axios from "axios";
  // import { mapState } from "vuex";
  // import { baseURL } from ".././../common/port_url";
  // import { rejects } from "assert";
  import KtButton from "@/views/Core/KtButton"
  import PopupTreeInput from "@/components/PopupTreeInput"
  export default {
    components:{
      KtButton,
      PopupTreeInput
    },
    data() {
      return {
        size: 'small',
        loading: false,
        filters: {
          name: ''
        },
        data4: [],
        dialogVisible: false, //控制新增弹窗
        dialogVisible3: false, //控制三级部门新增弹窗
        deptType: false, //控制编辑弹窗
        dataForm: {
          id: "",
          deptName: '',
          parentId: 0,
          deptLevel:"",
          deptType:""
          // value:""
        },
        props:{
          label: 'deptName',
          nodeKey:"key",
          children: 'children'
        },
        dataRule: {
          deptName: [
            { required: true, message: '部门名称不能为空', trigger: 'blur' }
          ]
        },
        deptRule: {
          deptName: [
            { required: true, message: '部门名称不能为空', trigger: 'blur' }
          ],
          deptType: [
            { required: true, message: '类型不能为空', trigger: 'blur' }
          ]
        },
        popupTreeData: [],
        popupTreeProps: {
          label: 'value',
          children: 'children'
        }
      }
    },
    methods: {
      // 获取数据
      findTreeData: function () {
        this.loading = true;
        this.$api.dept.findDeptTree().then((res) => {
          this.data4 =res.departmentInfoList;
          this.loading = false
        })
      },
      //类型下拉框
      findDeptType:function () {
        this.$api.dept.findDeptType().then((res) => {
          this.popupTreeData=res.keyValueList
        })
      },
      // 菜单树选中
      handleTreeSelectChange (data, node) {
        this.dataForm.deptType = data.key;
        this.dataForm.value = data.value;
      },
      // 显示新增界面
      handleAdd: function (node,data) {
        this.dialogVisible = true;
        // Object.assign(this.dataForm, node);
        let deptLevel=node.level
        this.dataForm = {
          deptName: '',
          parentId: data.id,
          deptLevel:deptLevel
        }
      },
      // 显示三级部门新增界面
      handleAdd3: function (node,data) {
        this.dialogVisible3 = true;
        Object.assign(this.dataForm, node);
        let deptLevel=node.level
        this.dataForm = {
          deptName: '',
          parentId: data.id,
          deptLevel:deptLevel,
          value:"",
          deptType: ""
        }
      },
      // 显示部门编辑界面
      handleEdint: function (node,data) {
        this.deptType = true;
        let deptName=data.deptName
        let deptType=data.deptType
        for(let i=0; i<this.popupTreeData.length ; i++){
          if(data.deptType == this.popupTreeData[i].key){
            this.dataForm.value = this.popupTreeData[i].value
            // let value=this.dataForm.value
          }
        }
        let value=this.dataForm.value
        this.dataForm = {
          id: data.id,
          deptName: deptName,
          parentId: data.parentId,
          deptLevel:data.deptLevel,
          value:value,
          deptType: deptType.toString()
        }
      },

      //删除部门
      handleDelete (node,data) {
        this.$confirm('确认删除选中记录吗？', '提示', {
          type: 'warning'
        }).then(() => {
          let params = data.id
          if (node.childNodes.length) {
            this.$alert("当前部门下有子部门，不可删除", "提示", {
              confirmButtonText: "确定"
            });
            return
          }else{
            this.$api.dept.batchDelete({"departmentId":params}).then( res => {
              this.findTreeData();
              this.$message({message: res.msg, type: 'success'})
            })
          }
        })
      },
      // 保存表单提交
      submitForm () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              this.$api.dept.save(params).then((res) => {
                this.editLoading = false
                if(res.result == 1) {
                  this.$message({ message: res.msg, type: 'success' })
                  this.dialogVisible = false
                  this.dialogVisible3 = false
                } else {
                  this.$message({message: res.msg, type: 'error'})
                }
                this.findTreeData()
              })
            })
          }
        })
      },
      submitEdint () {
        this.$refs['dataFormEdit'].validate((valid) => {
          if (valid) {
            this.$confirm('确认提交吗？', '提示', {}).then(() => {
              this.editLoading = true
              let params = Object.assign({}, this.dataForm)
              this.$api.dept.edint(params).then((res) => {
                this.editLoading = false
                if(res.result == 1) {
                  this.$message({ message: res.msg, type: 'success' })
                  this.deptType = false
                } else {
                  this.$message({message: res.msg, type: 'error'})
                }
                this.findTreeData()
              })
            })
          }
        })
      },
    },
    mounted() {
      this.findTreeData()
      this.findDeptType()
    }
  };
</script>
<style scoped>
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  el-tree {
    padding: 100px;
    font-size: 20px;
  }
  el-tree span {
    font-size: 20px;
  }
  .custom-tree-node {
    font-size: 20px;
  }
  .department .el-tree-node__content {
    height: 100px;
    /*line-height: 40px;*/
    /*font-size: 40px;*/
  }
  .el-button {
    margin: 20px;
  }
  .el-checkbox__inner {
    display: none;
  }
</style>
<style>
  .department .el-tree-node__content {
    height: 50px;
    /*line-height: 40px;*/
    /*font-size: 40px;*/
  }
  .department .el-checkbox__inner {
    display: none;
  }
  .department{
    height: 85%;
    overflow: scroll;
    overflow-x: hidden;
  }
</style>
